<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lazy Modules | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Lazy Modules | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Lazy Modules</h1>
          <ul class="docs-index"></ul>
          <div class="important-note">
            <p><b>Lazy Modules available from Framework7 version 3.4.0.</b></p>
          </div>
          <p>Lazy modules provide a way to make your web app startup time much faster, by loading initially only functionality required for home page/view, and load additional modules/components when navigating to pages that use them. This will make your initial app scripts and styles a way more smaller size, which is significant when you build a web app or PWA.</p>
          <p>There are two type of modules available with Framework7. ES-modules and "browser modules". To use ES-modules you need to use bundler with <code>import/export</code> support like Webpack or Rollup. Browser modules are designed only to be used when you don't use any bundler.</p>
          <h2>Modules API</h2>
          <p>To load Framework7 modules <b>after</b> it was initialized we need to use following app methods:</p>
          <div class="method-wrap">
            <p><span class="method">app.loadModule(<span>module</span>)</span> - load module</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">module</span> - one of the following:<br> - <span class="parameter-type">object</span> with <a href="plugins-api.html">Framework7 Plugin</a><br> - <span class="parameter-type">function</span> that returns <a href="plugins-api.html">Framework7 Plugin</a><br> - <span class="parameter-type">string</span> with module name to load (e.g. <code>'searchbar'</code>)<br> - <span class="parameter-type">string</span> with module path to load (e.g. <code>'path/to/lazy-components/searchbar.js'</code>)</li>
            </ul>
            <p class="method-returns">Method returns Promise</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.loadModules(<span>modules</span>)</span> - load modules</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">modules</span> - array with modules, where each array item one of the described above</li>
            </ul>
            <p class="method-returns">Method returns Promise</p>
          </div>
          <h2>ES Modules</h2>
          <p>This method will only work if you use bundler like Webpack or Rollup.</p>
          <p>Firs of all, we need to realize what modules our app requires to display initial page and import them:</p><pre><code class="js"><span class="token comment">// import core framework with core components only:</span>
<span class="token keyword-block">import</span> Framework7 <span class="token keyword-block">from</span> <span class="token string">'framework7'</span><span class="token punctuation">;</span>

<span class="token comment">// import framework7 modules/components we need on initial page</span>
<span class="token keyword-block">import</span> Searchbar <span class="token keyword-block">from</span> <span class="token string">'framework7/components/searchbar/searchbar.js'</span><span class="token punctuation">;</span>
<span class="token keyword-block">import</span> Accordion <span class="token keyword-block">from</span> <span class="token string">'framework7/components/accordion/accordion.js'</span><span class="token punctuation">;</span>

<span class="token comment">// install core modules</span>
Framework7<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>Searchbar<span class="token punctuation">,</span> Accordion<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// init app</span>
<span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// f7 params</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>Later when we need to install additional F7 module we can use dynamic imports:</p><pre><code class="js"><span class="token function">import</span><span class="token punctuation">(</span><span class="token string">'framework7/components/gauge/gauge.js'</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">module</span> <span class="token operator">=></span> app<span class="token punctuation">.</span><span class="token function">loadModule</span><span class="token punctuation">(</span>module<span class="token punctuation">.</span><span class="token keyword-block">default</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token comment">// module loaded and we can use gauge api</span>
    app<span class="token punctuation">.</span>gauge<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <p>If we need to load few modules at a time:</p><pre><code class="js"><span class="token built-in">Promise</span>
  <span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    <span class="token function">import</span><span class="token punctuation">(</span><span class="token string">'framework7/components/gauge/gauge.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function">import</span><span class="token punctuation">(</span><span class="token string">'framework7/components/calendar/calendar.js'</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">modules</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token comment">// loaded module will be at ".default" prop of import result</span>
    <span class="token keyword">var</span> modulesToLoad <span class="token operator">=</span> modules<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">module</span> <span class="token operator">=></span> module<span class="token punctuation">.</span><span class="token keyword-block">default</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword-block">return</span> app<span class="token punctuation">.</span><span class="token function">loadModules</span><span class="token punctuation">(</span>modulesToLoad<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token comment">// modules loaded and we can use their api</span>
    app<span class="token punctuation">.</span>gauge<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span>
    app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <p>It may be not very convenient to write it every time so we can make a function for that:</p><pre><code class="js"><span class="token keyword">function</span> <span class="token function">loadF7Modules</span><span class="token punctuation">(</span><span class="token parameter">moduleNames</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> modulesToLoad <span class="token operator">=</span> moduleNames<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">moduleName</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> <span class="token function">import</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">framework7/components/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>moduleName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>moduleName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.js</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword-block">return</span> <span class="token built-in">Promise</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>modulesToLoad<span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">modules</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token keyword-block">return</span> app<span class="token punctuation">.</span><span class="token function">loadModules</span><span class="token punctuation">(</span>modules<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">module</span> <span class="token operator">=></span> module<span class="token punctuation">.</span><span class="token keyword-block">default</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span></pre></code>
          <p>And we can use it like:</p><pre><code class="js"><span class="token function">loadF7Modules</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'gauge'</span><span class="token punctuation">,</span> <span class="token string">'calendar'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  <span class="token comment">// modules loaded and we can use their api</span>
  app<span class="token punctuation">.</span>gauge<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span>
  app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>If we need to preload modules for specific route then route's <code>async</code> is the best fit for it:</p><pre><code class="js"><span class="token keyword">var</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./index.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/* Page where we need Gauge and Calendar modules to be loaded */</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/gauge-calendar/'</span><span class="token punctuation">,</span>
    <span class="token function-variable function">async</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">routeTo<span class="token punctuation">,</span> routeFrom<span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// load modules</span>
      <span class="token function">loadF7Modules</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'gauge'</span><span class="token punctuation">,</span> <span class="token string">'calendar'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
        <span class="token comment">// resolve route</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          componentUrl<span class="token punctuation">:</span> <span class="token string">'./gauge-calendar.html'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span></pre></code>
          <p>The following ES-module components are available for importing (all other components are part of the core):</p>
          <table>
            <thead>
              <tr>
                <th>Component</th>
                <th>Path</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Dialog</td>
                <td><code>framework7/components/dialog/dialog.js</code></td>
              </tr>
              <tr>
                <td>Popup</td>
                <td><code>framework7/components/popup/popup.js</code></td>
              </tr>
              <tr>
                <td>LoginScreen</td>
                <td><code>framework7/components/login-screen/login-screen.js</code></td>
              </tr>
              <tr>
                <td>Popover</td>
                <td><code>framework7/components/popover/popover.js</code></td>
              </tr>
              <tr>
                <td>Actions</td>
                <td><code>framework7/components/actions/actions.js</code></td>
              </tr>
              <tr>
                <td>Sheet</td>
                <td><code>framework7/components/sheet/sheet.js</code></td>
              </tr>
              <tr>
                <td>Toast</td>
                <td><code>framework7/components/toast/toast.js</code></td>
              </tr>
              <tr>
                <td>Preloader</td>
                <td><code>framework7/components/preloader/preloader.js</code></td>
              </tr>
              <tr>
                <td>Progressbar</td>
                <td><code>framework7/components/progressbar/progressbar.js</code></td>
              </tr>
              <tr>
                <td>Sortable</td>
                <td><code>framework7/components/sortable/sortable.js</code></td>
              </tr>
              <tr>
                <td>Swipeout</td>
                <td><code>framework7/components/swipeout/swipeout.js</code></td>
              </tr>
              <tr>
                <td>Accordion</td>
                <td><code>framework7/components/accordion/accordion.js</code></td>
              </tr>
              <tr>
                <td>ContactsList</td>
                <td><code>framework7/components/contacts-list/contacts-list.js</code></td>
              </tr>
              <tr>
                <td>VirtualList</td>
                <td><code>framework7/components/virtual-list/virtual-list.js</code></td>
              </tr>
              <tr>
                <td>ListIndex</td>
                <td><code>framework7/components/list-index/list-index.js</code></td>
              </tr>
              <tr>
                <td>Timeline</td>
                <td><code>framework7/components/timeline/timeline.js</code></td>
              </tr>
              <tr>
                <td>Tabs</td>
                <td><code>framework7/components/tabs/tabs.js</code></td>
              </tr>
              <tr>
                <td>Panel</td>
                <td><code>framework7/components/panel/panel.js</code></td>
              </tr>
              <tr>
                <td>Card</td>
                <td><code>framework7/components/card/card.js</code></td>
              </tr>
              <tr>
                <td>Chip</td>
                <td><code>framework7/components/chip/chip.js</code></td>
              </tr>
              <tr>
                <td>Form</td>
                <td><code>framework7/components/form/form.js</code></td>
              </tr>
              <tr>
                <td>Input</td>
                <td><code>framework7/components/input/input.js</code></td>
              </tr>
              <tr>
                <td>Checkbox</td>
                <td><code>framework7/components/checkbox/checkbox.js</code></td>
              </tr>
              <tr>
                <td>Radio</td>
                <td><code>framework7/components/radio/radio.js</code></td>
              </tr>
              <tr>
                <td>Toggle</td>
                <td><code>framework7/components/toggle/toggle.js</code></td>
              </tr>
              <tr>
                <td>Range</td>
                <td><code>framework7/components/range/range.js</code></td>
              </tr>
              <tr>
                <td>Stepper</td>
                <td><code>framework7/components/stepper/stepper.js</code></td>
              </tr>
              <tr>
                <td>SmartSelect</td>
                <td><code>framework7/components/smart-select/smart-select.js</code></td>
              </tr>
              <tr>
                <td>Grid</td>
                <td><code>framework7/components/grid/grid.js</code></td>
              </tr>
              <tr>
                <td>Calendar</td>
                <td><code>framework7/components/calendar/calendar.js</code></td>
              </tr>
              <tr>
                <td>Picker</td>
                <td><code>framework7/components/picker/picker.js</code></td>
              </tr>
              <tr>
                <td>InfiniteScroll</td>
                <td><code>framework7/components/infinite-scroll/infinite-scroll.js</code></td>
              </tr>
              <tr>
                <td>PullToRefresh</td>
                <td><code>framework7/components/pull-to-refresh/pull-to-refresh.js</code></td>
              </tr>
              <tr>
                <td>Lazy</td>
                <td><code>framework7/components/lazy/lazy.js</code></td>
              </tr>
              <tr>
                <td>DataTable</td>
                <td><code>framework7/components/data-table/data-table.js</code></td>
              </tr>
              <tr>
                <td>Fab</td>
                <td><code>framework7/components/fab/fab.js</code></td>
              </tr>
              <tr>
                <td>Searchbar</td>
                <td><code>framework7/components/searchbar/searchbar.js</code></td>
              </tr>
              <tr>
                <td>Messages</td>
                <td><code>framework7/components/messages/messages.js</code></td>
              </tr>
              <tr>
                <td>Messagebar</td>
                <td><code>framework7/components/messagebar/messagebar.js</code></td>
              </tr>
              <tr>
                <td>Swiper</td>
                <td><code>framework7/components/swiper/swiper.js</code></td>
              </tr>
              <tr>
                <td>PhotoBrowser</td>
                <td><code>framework7/components/photo-browser/photo-browser.js</code></td>
              </tr>
              <tr>
                <td>Notification</td>
                <td><code>framework7/components/notification/notification.js</code></td>
              </tr>
              <tr>
                <td>Autocomplete</td>
                <td><code>framework7/components/autocomplete/autocomplete.js</code></td>
              </tr>
              <tr>
                <td>Tooltip</td>
                <td><code>framework7/components/tooltip/tooltip.js</code></td>
              </tr>
              <tr>
                <td>Gauge</td>
                <td><code>framework7/components/gauge/gauge.js</code></td>
              </tr>
              <tr>
                <td>Vi</td>
                <td><code>framework7/components/vi/vi.js</code></td>
              </tr>
              <tr>
                <td>Typography</td>
                <td><code>framework7/components/typography/typography.js</code></td>
              </tr>
            </tbody>
          </table>
          <h2>Browser Modules</h2>
          <p>Browser modules are intended to be used in development setup without bundlers (like Webpack or Rollup).</p>
          <p>First of all, in our main <a href="app-layout.html">app layout</a> we need to use so called "framework7-lazy" library instead of <code>framework7.js</code> and <code>framework7.css</code> scripts and styles that contains whole framework.</p><pre><code class="html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    ...
    <span class="token comment">&lt;!-- Path to Framework7 Lazy Library CSS --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/framework7/css/framework7-lazy.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- Path to your custom app styles--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/my-app.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      ...
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- Path to Framework7 Lazy Library JS--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/framework7/js/framework7-lazy.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- Path to your app js--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/my-app.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></pre></code>
          <p>We also need to inclued modules/components that we need on initial page after <code>framework7-lazy</code> styles and script. If we need Searchbar and Accordion then we need to include them in app layout:</p><pre><code class="html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    ...
    <span class="token comment">&lt;!-- Path to Framework7 Lazy Library CSS --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/framework7/css/framework7-lazy.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- Include modules required for initial page --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/framework7/lazy-components/accordion.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/framework7/lazy-components/searchbar.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- Path to your custom app styles--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/my-app.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      ...
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- Path to Framework7 Lazy Library JS--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/framework7/js/framework7-lazy.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- Include modules required for initial page --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/framework7/lazy-components/accordion.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/framework7/lazy-components/searchbar.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- Path to your app js--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/my-app.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></pre></code>
          <p>Now when we init Framework7 app we need to specify where is the rest of modules in <code>lazyModulesPath</code> parameter (path to <code>/lazy-components/</code> folder):</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
  lazyModulesPath<span class="token punctuation">:</span> <span class="token string">'path/to/framework7/lazy-components'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>Now we can just load module by its name (it will automatically fetch file with such file name in specified <code>lazyModulesPath</code> location):</p><pre><code class="js">app<span class="token punctuation">.</span><span class="token function">loadModules</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'calendar'</span><span class="token punctuation">,</span> <span class="token string">'gauge'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  <span class="token comment">// modules loaded and we can use their api</span>
  app<span class="token punctuation">.</span>gauge<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span>
  app<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <div class="important-note">
            <p>Note, that browser modules also load modules styles automatically. So loading <code>gauge.js</code> will also automatically load <code>gauge.css</code> stylesheet.</p>
          </div>
          <p>So the above expression <code>app.loadModules(['calendar', 'gauge'])</code> will load the following files:</p>
          <ul>
            <li>path/to/framework7/lazy-components/calendar.js</li>
            <li>path/to/framework7/lazy-components/calendar.css</li>
            <li>path/to/framework7/lazy-components/gauge.js</li>
            <li>path/to/framework7/lazy-components/gauge.css</li>
          </ul>
          <p>When we need to preload modules for specific route and we use browser modules, then we can just use route's <code>modules</code> property:</p><pre><code class="js"><span class="token keyword">var</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./index.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/* Page where we need Gauge and Calendar modules to be loaded */</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/gauge-calendar/'</span><span class="token punctuation">,</span>
    modules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'gauge'</span><span class="token punctuation">,</span> <span class="token string">'calendar'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// will load these components before loading route</span>
    componentUrl<span class="token punctuation">:</span> <span class="token string">'./gauge-calendar.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span></pre></code>
          <p>Or the same but using <code>async</code> route like in example with ES modules:</p><pre><code class="js"><span class="token keyword">var</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./index.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/* Page where we need Gauge and Calendar modules to be loaded */</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/gauge-calendar/'</span><span class="token punctuation">,</span>
    modules<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'gauge'</span><span class="token punctuation">,</span> <span class="token string">'calendar'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// will load these components before loading route</span>
    <span class="token function-variable function">async</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">routeTo<span class="token punctuation">,</span> routeFrom<span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      app<span class="token punctuation">.</span><span class="token function">loadModules</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'gauge'</span><span class="token punctuation">,</span> <span class="token string">'calendar'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          componentUrl<span class="token punctuation">:</span> <span class="token string">'./gauge-calendar.html'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span></pre></code>
          <p>The following browser modules-components are available for loading (all other components are part of the core):</p>
          <table>
            <thead>
              <tr>
                <th>Component</th>
                <th>Name</th>
                <th>Path</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Dialog</td>
                <td><code>dialog</code></td>
                <td><code>framework7/lazy-components/dialog.js</code></td>
              </tr>
              <tr>
                <td>Popup</td>
                <td><code>popup</code></td>
                <td><code>framework7/lazy-components/popup.js</code></td>
              </tr>
              <tr>
                <td>LoginScreen</td>
                <td><code>login-screen</code></td>
                <td><code>framework7/lazy-components/login-screen.js</code></td>
              </tr>
              <tr>
                <td>Popover</td>
                <td><code>popover</code></td>
                <td><code>framework7/lazy-components/popover.js</code></td>
              </tr>
              <tr>
                <td>Actions</td>
                <td><code>actions</code></td>
                <td><code>framework7/lazy-components/actions.js</code></td>
              </tr>
              <tr>
                <td>Sheet</td>
                <td><code>sheet</code></td>
                <td><code>framework7/lazy-components/sheet.js</code></td>
              </tr>
              <tr>
                <td>Toast</td>
                <td><code>toast</code></td>
                <td><code>framework7/lazy-components/toast.js</code></td>
              </tr>
              <tr>
                <td>Preloader</td>
                <td><code>preloader</code></td>
                <td><code>framework7/lazy-components/preloader.js</code></td>
              </tr>
              <tr>
                <td>Progressbar</td>
                <td><code>progressbar</code></td>
                <td><code>framework7/lazy-components/progressbar.js</code></td>
              </tr>
              <tr>
                <td>Sortable</td>
                <td><code>sortable</code></td>
                <td><code>framework7/lazy-components/sortable.js</code></td>
              </tr>
              <tr>
                <td>Swipeout</td>
                <td><code>swipeout</code></td>
                <td><code>framework7/lazy-components/swipeout.js</code></td>
              </tr>
              <tr>
                <td>Accordion</td>
                <td><code>accordion</code></td>
                <td><code>framework7/lazy-components/accordion.js</code></td>
              </tr>
              <tr>
                <td>ContactsList</td>
                <td><code>contacts-list</code></td>
                <td><code>framework7/lazy-components/contacts-list.js</code></td>
              </tr>
              <tr>
                <td>VirtualList</td>
                <td><code>virtual-list</code></td>
                <td><code>framework7/lazy-components/virtual-list.js</code></td>
              </tr>
              <tr>
                <td>ListIndex</td>
                <td><code>list-index</code></td>
                <td><code>framework7/lazy-components/list-index.js</code></td>
              </tr>
              <tr>
                <td>Timeline</td>
                <td><code>timeline</code></td>
                <td><code>framework7/lazy-components/timeline.js</code></td>
              </tr>
              <tr>
                <td>Tabs</td>
                <td><code>tabs</code></td>
                <td><code>framework7/lazy-components/tabs.js</code></td>
              </tr>
              <tr>
                <td>Panel</td>
                <td><code>panel</code></td>
                <td><code>framework7/lazy-components/panel.js</code></td>
              </tr>
              <tr>
                <td>Card</td>
                <td><code>card</code></td>
                <td><code>framework7/lazy-components/card.js</code></td>
              </tr>
              <tr>
                <td>Chip</td>
                <td><code>chip</code></td>
                <td><code>framework7/lazy-components/chip.js</code></td>
              </tr>
              <tr>
                <td>Form</td>
                <td><code>form</code></td>
                <td><code>framework7/lazy-components/form.js</code></td>
              </tr>
              <tr>
                <td>Input</td>
                <td><code>input</code></td>
                <td><code>framework7/lazy-components/input.js</code></td>
              </tr>
              <tr>
                <td>Checkbox</td>
                <td><code>checkbox</code></td>
                <td><code>framework7/lazy-components/checkbox.js</code></td>
              </tr>
              <tr>
                <td>Radio</td>
                <td><code>radio</code></td>
                <td><code>framework7/lazy-components/radio.js</code></td>
              </tr>
              <tr>
                <td>Toggle</td>
                <td><code>toggle</code></td>
                <td><code>framework7/lazy-components/toggle.js</code></td>
              </tr>
              <tr>
                <td>Range</td>
                <td><code>range</code></td>
                <td><code>framework7/lazy-components/range.js</code></td>
              </tr>
              <tr>
                <td>Stepper</td>
                <td><code>stepper</code></td>
                <td><code>framework7/lazy-components/stepper.js</code></td>
              </tr>
              <tr>
                <td>SmartSelect</td>
                <td><code>smart-select</code></td>
                <td><code>framework7/lazy-components/smart-select.js</code></td>
              </tr>
              <tr>
                <td>Grid</td>
                <td><code>grid</code></td>
                <td><code>framework7/lazy-components/grid.js</code></td>
              </tr>
              <tr>
                <td>Calendar</td>
                <td><code>calendar</code></td>
                <td><code>framework7/lazy-components/calendar.js</code></td>
              </tr>
              <tr>
                <td>Picker</td>
                <td><code>picker</code></td>
                <td><code>framework7/lazy-components/picker.js</code></td>
              </tr>
              <tr>
                <td>InfiniteScroll</td>
                <td><code>infinite-scroll</code></td>
                <td><code>framework7/lazy-components/infinite-scroll.js</code></td>
              </tr>
              <tr>
                <td>PullToRefresh</td>
                <td><code>pull-to-refresh</code></td>
                <td><code>framework7/lazy-components/pull-to-refresh.js</code></td>
              </tr>
              <tr>
                <td>Lazy</td>
                <td><code>lazy</code></td>
                <td><code>framework7/lazy-components/lazy.js</code></td>
              </tr>
              <tr>
                <td>DataTable</td>
                <td><code>data-table</code></td>
                <td><code>framework7/lazy-components/data-table.js</code></td>
              </tr>
              <tr>
                <td>Fab</td>
                <td><code>fab</code></td>
                <td><code>framework7/lazy-components/fab.js</code></td>
              </tr>
              <tr>
                <td>Searchbar</td>
                <td><code>searchbar</code></td>
                <td><code>framework7/lazy-components/searchbar.js</code></td>
              </tr>
              <tr>
                <td>Messages</td>
                <td><code>messages</code></td>
                <td><code>framework7/lazy-components/messages.js</code></td>
              </tr>
              <tr>
                <td>Messagebar</td>
                <td><code>messagebar</code></td>
                <td><code>framework7/lazy-components/messagebar.js</code></td>
              </tr>
              <tr>
                <td>Swiper</td>
                <td><code>swiper</code></td>
                <td><code>framework7/lazy-components/swiper.js</code></td>
              </tr>
              <tr>
                <td>PhotoBrowser</td>
                <td><code>photo</code></td>
                <td><code>framework7/lazy-components/browser/photo-browser.js</code></td>
              </tr>
              <tr>
                <td>Notification</td>
                <td><code>notification</code></td>
                <td><code>framework7/lazy-components/notification.js</code></td>
              </tr>
              <tr>
                <td>Autocomplete</td>
                <td><code>autocomplete</code></td>
                <td><code>framework7/lazy-components/autocomplete.js</code></td>
              </tr>
              <tr>
                <td>Tooltip</td>
                <td><code>tooltip</code></td>
                <td><code>framework7/lazy-components/tooltip.js</code></td>
              </tr>
              <tr>
                <td>Gauge</td>
                <td><code>gauge</code></td>
                <td><code>framework7/lazy-components/gauge.js</code></td>
              </tr>
              <tr>
                <td>Vi</td>
                <td><code>vi</code></td>
                <td><code>framework7/lazy-components/vi.js</code></td>
              </tr>
              <tr>
                <td>Typography</td>
                <td><code>typography</code></td>
                <td><code>framework7/lazy-components/typography.js</code></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>